<template>
    <div :class="{ 'collapse-cell--disabled': disabled,'collapse-cell--notdisabled': !disabled, 'collapse-cell--open': isOpen,'collapse-cell--hide':!isOpen }"
         class="collapse-cell">

        <!-- 头部 -->
        <div class="collapse-cell__title" @click="onClick">
            <img v-if="thumb" :src="thumb" alt="占位图标" class="collapse-cell__title-img"/>
            <span class="collapse-cell__title-text">{{ title }}</span>
            <div :class="{ 'collapse-cell__title-arrow-active': isOpen, 'collapse-cell--animation': showAnimation === true }" class="collapse-cell__title-arrow">
                <i class="iconfont icon-xiangxiajiantou" ></i>
            </div>
        </div>

        <!--内容-->
        <div :class="{'collapse-cell__content--hide':!isOpen}" class="collapse-cell__content">
            <div :class="{ 'collapse-cell--animation': showAnimation === true }" class="collapse-cell__wrapper"
                 :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
                <slot/>
            </div>
        </div>

    </div>
</template>

<script>
export default {
  name: "collapse-item",
  components: {},
  data() {
    return {
      isOpen: false
    }
  },

  props: {
    title: {
      // 列表标题
      type: String,
      default: ''
    },
    name: {
      // 唯一标识符
      type: [Number, String],
      default: 0
    },
    disabled: {
      // 是否禁用
      type: Boolean,
      default: false
    },
    showAnimation: {
      // 是否显示动画
      type: Boolean,
      default: false
    },
    open: {
      // 是否展开
      type: Boolean,
      default: false
    },
    thumb: {
      // 缩略图
      type: String,
      default: ''
    }
  },

  // watch: {
  //   open(val) {
  //     this.isOpen = val
  //   }
  // },

  inject: ['collapse'],

  created() {
    this.isOpen = this.open;  // 获取每一个item的展开状态
    this.nameSync = this.name ? this.name : this.collapse.childrens.length;  // 给每一个item起一个名字，如果有名字就写名字，没有名字按照length来赋值
    this.collapse.childrens.push(this); // 将当前的这个item放到children数组里面去
    if (String(this.collapse.accordion) === 'true') {  // 是否启用手风琴模式
      /*
      * 这一段的意思是：如果当前的这个item是展开的，那么就去获取
      * */
      if (this.isOpen) {  // 如果当前这个item是展开的
        /*
        * 获取上一个元素。为什么这里用length - 2表示获取上一个元素呢，假如说数组长度是1，那么1-2就是-1，这个lastEl就是undefined。如果数组长度是2，那么2-2就是0，那就自然获取到了
        * 第一个元素。它相当于就是去看有没有上一个元素，如果有上一个元素，那么就把上一个元素给关闭掉
        * */
        let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2];
        if (lastEl) {
          this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
        }
      }
    }
  },

  methods: {
    onClick() {
      if (this.disabled) {
        return
      }
      if (String(this.collapse.accordion) === 'true') {
        /*
        * 在手风琴模式下，点击每一个item的时候。把其他item的展开状态设置为false，自己的展开状态取相反的值。
        * 并且把自己的这个change值传递给父组件，然后再强制渲染一遍页面
        * */
        this.collapse.childrens.forEach(vm => {
          if (vm === this) {
            return
          }
          vm.isOpen = false
        })
      }
      this.isOpen = !this.isOpen;
      this.collapse.onChange && this.collapse.onChange();
      this.$forceUpdate();  // 强制渲染页面
    }
  },

  beforeDestroy() {
  }
}
</script>

<style scoped>
    .collapse-cell {
        flex-direction: column;
        border-bottom: 1px solid red;
    }

    .collapse-cell--open {
        background-color: yellow;
    }

    .collapse-cell--disabled {
        background-color: #f1f1f1;
    }

    .collapse-cell--hide {
        height: 48px;
    }

    .collapse-cell--animation {
        /*transition: all .3s ease;*/
        transition: transform .3s ease;
    }

    .collapse-cell__title {
        position: relative;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .collapse-cell__title:active {
        background-color: skyblue;
    }

    .collapse-cell__title-img {
        height: 52px;
        width: 52px;
        margin-right: 10px;
    }

    .collapse-cell__title-arrow {
        width: 20px;
        height: 20px;
        transform: rotate(0deg);
        transform-origin: center center;
    }

    .collapse-cell__title-arrow-active {
        transform: rotate(180deg);
    }

    .collapse-cell__title-text {
        flex: 1;
        font-size: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .collapse-cell__content {
        overflow: hidden;
    }

    .collapse-cell__wrapper {
        flex-direction: column;
    }

    .collapse-cell__content--hide {
        height: 0;
        line-height: 0;
    }
</style>
